<template>
  <div class="dailyTrainTicket">
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
      class="layout-content"
    >
      <a-space>
        <date-time-select v-model="search.date"></date-time-select>
        <train-code-input v-model="search.code"></train-code-input>
        <station-select
          :station="{
            label: '始发站',
            id: 'start',
            message: '始发站不能为空',
            placeholder: '请选择始发站',
          }"
          v-model="search.start"
        ></station-select>
        <station-select
          :station="{
            label: '终点站',
            id: 'end',
            message: '终点站不能为空',
            placeholder: '请选择终点站',
          }"
          v-model="search.end"
        ></station-select>
        <a-button type="primary" @click="handlePage"> 查找 </a-button>
      </a-space>

      <!-- 列表 -->
      <a-table
        :columns="columns"
        :data-source="data"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        :scroll="{ x: 1080, y: 400 }"
        :pagination="pagination"
        @change="handlePage"
        :loading="loading"
      >
        <span slot="action" slot-scope="record">
          <a-space>
            <a @click="booking(record)" :disabled="isExpire(record)">{{
              isExpire(record) ? "该车次已过期" : "预定"
            }}</a>
            <a @click="queryStation(record)">车站查询</a>
          </a-space>
        </span>
      </a-table>

      <!-- 车站查看窗口 -->
      <a-modal
        v-model="stationQueryVisible"
        title="车站查询"
        :width="800"
        :footer="null"
        :centered="true"
      >
        <a-table
          :columns="stationQueryColumns"
          :data-source="stationList"
          :pagination="stationQueryPage"
          @change="stationQueryChange"
        >
        </a-table>
      </a-modal>
    </a-layout-content>
  </div>
</template>

<script>
import { getPage } from "@/api/trainTicket";
import { notification } from "ant-design-vue";
import "ant-design-vue/lib/notification/style/css";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import duration from "dayjs/plugin/duration";
import TrainCodeInput from "@/components/TrainCodeInput.vue";
import DateTimeSelect from "@/components/DateTimeSelect.vue";
import StationSelect from "@/components/StationSelect.vue";
import {
  setSession,
  SESSION_ORDER,
  getSession,
  SESSION_DAILY_TRAIN_TICKET_SEARCH,
} from "@/utils/session";
import { getTrainStationList } from "@/api/dailyTrainStation";

export default {
  name: "dailyTrainTicket",
  components: { TrainCodeInput, DateTimeSelect, StationSelect },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this, { name: "coordinated" }),
      scrollY: 400,
      loading: false,
      closable: false,
      isEdit: false,
      code: "",
      description: "",
      locale: zhCN,
      showToday: true,
      pagination: {
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total, range) =>
          "显示" +
          range[0] +
          " ~ " +
          range[1] +
          "条记录，共" +
          total +
          "条记录",
        pageSize: 10,
        current: 1,
        total: 0,
      },
      stationQueryPage: {
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
        pageSize: 5,
        current: 1,
        total: 0,
      },
      columns: [
        {
          title: "日期",
          dataIndex: "date",
          key: "date",
          align: "center",
          width: 150,
        },
        {
          title: "车次编号",
          dataIndex: "trainCode",
          key: "trainCode",
          align: "center",
          width: 150,
        },
        {
          title: "车站",
          dataIndex: "station",
          key: "station",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return `${record.start} - ${record.end}`;
          },
        },
        {
          title: "时间",
          dataIndex: "time",
          key: "time",
          align: "center",
          width: 200,
          customRender: (text, record) => {
            return `${record.startTime} - ${record.endTime}`;
          },
        },
        {
          title: "历时",
          dataIndex: "periodTime",
          key: "periodTime",
          align: "center",
          width: 200,
          customRender: (text, record) => {
            dayjs.extend(customParseFormat);
            dayjs.extend(duration);
            let diff = dayjs(record.endTime, "HH:mm:ss").diff(
              dayjs(record.startTime, "HH:mm:ss")
            );
            if (diff < 0) {
              diff = dayjs
                .duration(24 * 60 * 60 * 1000 + diff)
                .asMilliseconds();
            }
            return dayjs.duration(diff).format("HH:mm:ss");
          },
        },
        {
          title: "一等座余票",
          dataIndex: "ydz",
          key: "ydz",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "一等座票价",
          dataIndex: "ydzPrice",
          key: "ydzPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "二等座余票",
          dataIndex: "edz",
          key: "edz",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "二等座票价",
          dataIndex: "edzPrice",
          key: "edzPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "软卧余票",
          dataIndex: "rw",
          key: "rw",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "软卧票价",
          dataIndex: "rwPrice",
          key: "rwPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "硬卧余票",
          dataIndex: "yw",
          key: "yw",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "硬卧票价",
          dataIndex: "ywPrice",
          key: "ywPrice",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "新增时间",
          dataIndex: "createTime",
          key: "createTime",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === 0 ? "--" : text;
          },
        },
        {
          title: "修改时间",
          dataIndex: "updateTime",
          key: "updateTime",
          align: "center",
          width: 150,
        },
        {
          title: "操作",
          key: "operation",
          fixed: "right",
          width: 180,
          scopedSlots: { customRender: "action" },
        },
      ],
      data: [],
      search: {
        code: "",
        date: "",
        start: "",
        end: "",
      },
      stationQueryVisible: false,
      stationQueryColumns: [
        {
          title: "站序",
          dataIndex: "index",
          key: "index",
          align: "center",
          width: 150,
        },
        {
          title: "站名",
          dataIndex: "name",
          key: "name",
          align: "center",
          width: 150,
        },
        {
          title: "出发时间",
          dataIndex: "outTime",
          key: "outTime",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === undefined ? "--" : text;
          },
        },
        {
          title: "到达时间",
          dataIndex: "inTime",
          key: "inTime",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === undefined ? "--" : text;
          },
        },
        {
          title: "停留时间",
          dataIndex: "stopTime",
          key: "stopTime",
          align: "center",
          width: 150,
          customRender: (text, record) => {
            return text === undefined ? "--" : text;
          },
        },
      ],
      stationList: [],
      queryStationParam: {},
    };
  },
  mounted() {
    this.search = { ...getSession(SESSION_DAILY_TRAIN_TICKET_SEARCH) };
    this.handlePage();
  },
  methods: {
    handlePage(pagination, filters, sorter) {
      this.loading = true;
      const pageNo =
        pagination === undefined
          ? 1
          : pagination.current
          ? pagination.current
          : 1;
      const pageSize =
        pagination === undefined
          ? 10
          : pagination.pageSize
          ? pagination.pageSize
          : 10;
      //持久化

      getPage(pageNo, pageSize, this.search).then((res) => {
        this.loading = false;
        if (res.code === 200) {
          //设置每页码和每页显示数
          this.pagination.current = pageNo;
          this.pagination.pageSize = pageSize;
          //获取结果
          this.data = res.data.data;
          this.pagination.total = res.data.total;
          setSession(SESSION_DAILY_TRAIN_TICKET_SEARCH, this.search);
        } else {
          notification.error({
            message: "消息提示",
            description: res.message,
            duration: 3,
          });
        }
      });
    },
    booking(record) {
      setSession(SESSION_ORDER, record);
      this.$router.push("/order");
    },
    //查询途径车站
    queryStation(record) {
      this.queryStationParam = {
        trainCode: record.trainCode,
        date: record.date,
      };
      this.stationQueryChange();
    },
    //分页查找途径车站
    stationQueryChange(pagination) {
      const pageNo = pagination === undefined ? 1 : pagination.current;
      const pageSize = pagination === undefined ? 5 : pagination.pageSize;
      getTrainStationList(pageNo, pageSize, this.queryStationParam).then(
        (res) => {
          if (res.code === 200) {
            this.stationList = res.data.data;
            this.stationQueryPage.total = res.data.total;
            this.stationQueryPage.current = pageNo;
            this.stationQueryPage.pageSize = pageSize;
            this.stationQueryVisible = true;
            console.log(res.data);
          } else {
            notification.error({
              message: "消息提示",
              description: res.message,
              duration: 3,
            });
          }
        }
      );
    },
    //车次是否过期
    isExpire(record) {
      const currentDateTime = new Date(); //获取当前时间
      const startDateTime =
        record.date.replace(/-/g, "/") + " " + record.startTime; //拼接开始时间
      return currentDateTime.valueOf() > new Date(startDateTime).valueOf(); //date转毫秒比较
    },
  },
};
</script>

<style lang="less" scoped>
.ant-input {
  width: 300px;
}
.ant-table-wrapper {
  margin-top: 20px;
}
/deep/ .ant-table-header {
  padding-bottom: 0 !important;
}
/deep/ .ant-select-selection--single {
  width: 195px !important;
}
/deep/ .ant-table-thead > tr > th {
  border-bottom: 0 !important;
}
.stationItem {
  display: flex;
  margin-bottom: 0;
}
</style>
